import { nextTick } from 'vue'

// 处理千分位展示
const generatingThousandthPer = (num: string) => {
  const num1 = num.split('.')[0]
  const num2 = num.split('.')[1] ? num.split('.')[1].slice(0, 2) : '00'
  const c = num1.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
  return c + '.' + num2
  // return num.toString().indexOf(".") !== -1 ? c + "." + num2 : c;
}

let current:any=null

// 千分位
export default {
  mounted(
    el: { querySelector: (arg0: string) => any },
    binding: { modifiers: {}; value: { [x: string]: any } },
    vnode: any
  ) {
    const key = Object.keys(binding.modifiers)[0]
    if (!binding.value[key]) {
      binding.value[key] = '0.00'
    }

    // 赋值
    const assignment = (event: any, value: any, value2?: any) => {
      binding.value[key] = value
      nextTick(
        () => (event.target.value = generatingThousandthPer(value2 || value))
      )
    }
    // 处理最后一位非法字符
    const handlerIllegalStr = (str: string) => {
      while (!/^[0-9]+.?[0-9]*/.test(str.charAt(str.length - 1))) {
        str = str.substr(0, str.length - 1)
      }
      return str
    }

    // el.addEventListener("input", (event) => {
    // const inp = event.target.value = event.target.value.replace(/,/g, "")
    // assignment(event, inp)
    // })

    // element
    // eslint-disable-next-line no-undef
    // const input = el.querySelector(".el-input__inner")
    const input = el.querySelector('input')
    input.style.textAlign="right"

    if (input) {
      input.setAttribute('data-thousands', binding.value[key])
      nextTick(
        () => (input.value = generatingThousandthPer(binding.value[key] + ''))
      )

      input.addEventListener('blur', (event: { target: { value: string } }) => {
        const val = event.target.value
        current=null
        // 是否是数字
        if (!val || isNaN(val as any)) {
          /**
           * 如果不是数字 重置为原数据
           */
          const value = input.getAttribute('data-thousands')
          binding.value[key] = value.replace(/,/g, '')
          nextTick(() => (event.target.value = generatingThousandthPer(value)))
          return false
        }
        input.setAttribute('data-thousands', val)
        assignment(event, handlerIllegalStr(val.replace(/,/g, '')))
      })

      input.addEventListener('focus', (event: { target: { value: any } }) => {
        current=input
        const value = input.getAttribute('data-thousands')
        const inp = (event.target.value = value.replace(/,/g, ''))
      })

      // input.addEventListener('change', (event: { target: { value: any; }; }) => {
      //    console.log(event.target.value)
      // })
    }
  },
  // 指令绑定元素因为数据修改触发修改后
  updated(
    el: { querySelector: (arg0: string) => any },
    binding: { modifiers: {}; value: { [x: string]: any } },
    vnode: any
  ) {

    const key = Object.keys(binding.modifiers)[0]
    const input = el.querySelector('input')
    if (current ==input) {
       return false
    }
    input.setAttribute('data-thousands', binding.value[key])
    nextTick(
      () => (input.value = generatingThousandthPer(binding.value[key] + ''))
    )
  },
}
